<template>
  <!-- 画廊展示页 -->
  <div class="gallery">
    <van-nav-bar
      :title="`${text}(${total})`"
      :fixed="true"
      :safe-area-inset-top="true"
      :placeholder="true"
      :border="false"
      @click-left="onClickLeft"
    >
      <template #left>
        <van-icon
          size="18"
          style="font-weight: bold"
          color="#000"
          name="arrow-left"
        />
      </template>
    </van-nav-bar>
    <div class="gallery_image_list">
      <div
        class="gallery_image_list_item"
        v-for="(item, index) in total"
        :key="index"
      >
        <img :src="src" alt="博士" loading="lazy" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { useRoute } from "vue-router";
// 接收宠物页面传过来的参数
const route = useRoute();

// 获取 query 参数
const total = Number(route.query.total) || 0;
const src = route.query.src || "/src/assets/yisheng.webp";
const text = route.query.text || "";

const onClickLeft = () => history.back();
</script>

<style lang="less" scoped>
.gallery {
  .gallery_image_list {
    padding: 12px;
    box-sizing: border-box;
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    .gallery_image_list_item {
      width: 48%;
      height: 160px;
      margin-top: 10px;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 10px;
      }
      &:nth-child(1) {
        margin-top: 0;
      }
      &:nth-child(2) {
        margin-top: 0;
      }
    }
  }
}
</style>